<template>
  <Modal :mask-closable="false" :title="title" class="modal-content-layout" v-model="memberVisible" :width="1200"><!--请分配维修员-->
    <Row :gutter="16">
      <Col :span="12">
      <Input v-model="key" :placeholder="`${$t('common.inputInfo')}姓名/工号`" :clearable="true" />
      </Col>
      <Col :span="6">
      <Button type="primary" @click="onSearch">{{ $t('common.Query') }}</Button>
      </Col>
    </Row>
    <Row :gutter="16" v-if="!showStates">
      <Col :span="4" class="margin10" v-for="item in memberList" :key="item.id">
      <div class="member" @click="handleMemberMul(item)">
        <img v-if="item.checked" src="~images/workorder/checked.png" class="icon-position" />
        <img v-if="!item.checked" src="~images/workorder/unchecked.jpg" class="icon-position" />
        <div class="member-item">
          <!--工号-->
          <span>{{ $t('fault.JobNumber') }}:</span><span>{{ item.empno }}</span>
        </div>
        <div class="member-item">
          <!--姓名-->
          <span>{{ $t('common.Name') }}:</span><span>{{ item.realname }}</span>
        </div>
      </div>
      </Col>
    </Row>
    <Row v-if="showStates">
    <!--暂无数据-->
      <div style="width: 70px; height: 80px; line-height: 80px; margin: 0px auto">
        {{ $t('暂无数据') }}
      </div>
    </Row>
    <div slot="footer">
      <Button type="default" @click="close">{{ $t('common.Cancle') }}</Button>
      <Button type="primary" :loading="loadingVisible" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "signleMemberModal",
  props: {
    checkbox: {
      type: Boolean,
      default (){
        return true
      }
    },
    title: {
      type: String,
      default (){
        return this.$t('fault.PleaseAssignMaintenancePersonnel')
      }
    }
  },
  data() {
    return {
      id: "",
      key: "",
      status: "",
      memberVisible: false,
      loadingVisible: false,
      memberList: [],
      showStates: false,
    };
  },
  methods: {
    onSearch() {
      let params = {
        empno: this.key,
      };
      this.axios({
        method: "post",
        url: "/dms/workOrder/getUsers",
        data: params,
      }).then((res) => {
        if (res.code === 200) {
          if (!res.data.length) {
            // this.$Message.warning(({content:'请输入正确的工号或姓名!',duration:6,closable:true}))
            // return false
            this.showStates = true;
          } else {
            this.showStates = false;
          }
          this.memberList = res.data.map((item) => {
            return {
              ...item,
              checked: false,
            };
          });
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    handleMemberMul(item) {
      if(this.checkbox){
        this.handleCheckBox(item)
      }else{
        this.handleRadio(item);
      }
      this.$forceUpdate()
    },
    handleCheckBox(item){
      this.memberList.forEach((list) => {
        if (list.id === item.id) {
          list.checked = !item.checked;
        }
      });
    },
    handleRadio(item){
      this.memberList.forEach((list) => {
        if (list.id === item.id) {
          list.checked = true;
        } else {
          list.checked = false;
        }
      });
    },
    open() {
      this.key = "";
      this.onSearch();
      this.memberVisible = true;
    },
    close() {
      this.memberVisible = false;
      this.loadingVisible = false;
      this.memberList = [];
    },
    handleOk() {
      let users = [];
      this.memberList.map((item) => {
        if (item.checked) {
          users.push(item)
        }
      });

      if (!users && users.length === 0) {
        this.$Message.warning({
          content: "请选择分配人员！",
          duration: 6,
          closable: true
        });
        return false;
      }

      this.loadingVisible = true;

      if(this.checkbox){
        this.$emit('handleOk', users);
      }else{
        this.$emit('handleOk', users[0]);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.member {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(221, 221, 221, 1);
  border-radius: 3px;
  box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;

  .icon-position {
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
  }

  .member-item {
    line-height: 30px;
    font-size: 14px;
    margin-top: 16px;

    span {
      &:nth-child(1) {
        display: inline-block;
        width: 40%;
        text-align: right;
        color: #999;
      }

      &:nth-child(2) {
        display: inline-block;
        width: 60%;
        text-align: center;
        font-family: "Helvetica", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #333;
        /*color: #000*/
      }
    }
  }
}

::v-deep.bgBlue {
  background-color: #e6f7ff;
  color: #1890ff;
}

.margin10 {
  margin-top: 10px;
}
</style>
